<template>
  <view class="content">
    <view class="info_box" v-if="showMove">
      <view class="info_title">
        个人基本信息
      </view>
      <view class="info_describe">
        根据你的个人信息，将计算你的健康状况，以便得到个人专属的健身指导
      </view>
      <view class="" style="display: flex;width: 100%;justify-content: space-evenly;">
        <view class="sele1">
          <view class="inpt">
            <view class="inpt_label">
              性别
            </view>
            <u-input v-model="gender" placeholder="请输入性别" input-align="center" type="number" :border="false"
              style="margin: 24rpx;width:180rpx;margin-right: 0;" />
          </view>
          <view class="inpt">
            <view class="inpt_label">
              体重
            </view>
            <u-input v-model="nowWeight" placeholder="请输入体重" input-align="center" type="number" :border="false"
              style="margin: 24rpx;width:152rpx;margin-right: 0;" />公斤
          </view>
        </view>
        <view class="sele1">
          <view class="inpt" @click="show = true">
            <view class="inpt_label">
              生日
            </view>
            <text style="margin-left: 40rpx;color: #c0c4cc;">{{birthday}}</text>
            <u-picker v-model="show" mode="time" :mask-close-able="false" @confirm="birthdayChange"></u-picker>
          </view>
          <view class="inpt">
            <view class="inpt_label">
              身高
            </view>
            <u-input v-model="height" placeholder="请输入身高" input-align="center" type="number" :border="false"
              style="margin: 24rpx;width:152rpx;margin-right: 0;" />厘米
          </view>
        </view>
      </view>
    </view>
    <view class="healCard" v-else>
      <view class="healCard_item">
        <image class="avatar" :src="vuex_user.avatar" mode="aspectFill"></image>
        <view class="user_info">
          <view class="name">
            <img src="/static/name.svg" alt="">
            <text>姓名：{{vuex_user.nickname}}</text>
          </view>
          <view class="gender">
            <img src="/static/gender.svg" alt="">
            <text>性别：{{gender}}</text>
          </view>
          <view class="age">
            <img src="/static/age.svg" alt="">
            <text>年龄：{{age}}</text>
          </view>
          <view class="height">
            <img src="/static/weight.svg" alt="">
            <text>体重：{{nowWeight}}斤</text>
          </view>
          <view class="weight">
            <img src="/static/height.svg" alt="">
            <text>身高：{{height}}CM</text>
          </view>
        </view>

      </view>
      <view class="file">
        <view class="file-data">
          <view class="file-weight">
            <view style="color: #FEFEFE;font-size: 100rpx;font-weight: 900;">
              {{weight*2}}
            </view>
            <view class="weight-g">
              斤
            </view>
          </view>
          <view class="file-than">
            <view class="file-than-top">
              <u-icon v-if="showIcon" name="arrow-downward" color="#FEFFFD" size="50"></u-icon>
              <u-icon v-else name="arrow-upward" color="#FEFFFD" size="50"></u-icon>
              {{thanWeight}}
            </view>
            <view class="file-than-bottom">
              对比数据
            </view>
          </view>
        </view>
        <view class="file-res">
          <view class="file-BMI">
            <view class="BMI-title">
              BMI
            </view>
            <view>
              {{BMI}}
            </view>
          </view>
          <view class="file-BMI">
            <view class="BMI-title">
              健康状况
            </view>
            <view class="BMI-data" :style="[healthStyle]">
              {{nowHealth}}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="showCreateFile" class="buton" @click="createFile">
      生成健康档案
    </view>
    <view v-if="!showCreateFile" class="buton" @click="back">
      返回首页
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        showMove: true,
        showIcon: false,
        show: false,
        gender: '',
        weight: "",
        nowWeight: '',
        height: '',
        birthday: '',
        BMI: null,
        nowHealth: '',
        thanWeight: null,
        healthStyle: {
          backgroundColor: '',
          color: ''
        },
        showCreateFile: true
      };
    },
    computed: {
      age() {
        // 出生日期，格式为'YYYY-MM-DD'
        const birthDate = this.vuex_user.birthday;
        // 将出生日期字符串转换为日期对象
        const birthDateObj = new Date(birthDate);
        // 获取当前日期
        const currentDate = new Date();
        // 计算年龄
        const age = currentDate.getFullYear() - birthDateObj.getFullYear();
        // 检查是否已过生日
        if (currentDate.getMonth() < birthDateObj.getMonth()) {
          age--; // 未过生日，减去一岁
        }
        return age
      }
    },
    watch: {
      gender(val) {
        // console.log(val);
        if (val == '' || val === '男' || val === '女') {
          this.$nextTick(() => {
            this.gender = val
          })
        } else {
          uni.showToast({
            title: "请输入正确的性别",
            icon: "none"
          })
          this.$nextTick(() => {
            this.gender = ''
          })
        }
      }
    },
    onLoad() {
      this.gender = this.vuex_user.gender == 1 ? '男' : this.vuex_user.gender == 0 ? '女' : ''
      if (!this.gender || !this.vuex_user.birthday || !this.vuex_user.weight) {
        uni.showModal({
          content: '请前往主页填写个人信息！',
          showCancel: false,
          confirmText: '前往主页',
          success: (res) => {
            if (res.confirm) {
              uni.redirectTo({
                url: '../my-info/my-info'
              })
            }
          }
        })
      }
      this.birthday = this.vuex_user.birthday || '请选择出生年月'
      this.weight = this.vuex_user.weight
    },
    methods: {
      birthdayChange(e) {
        this.birthday = e.year + '-' + e.month + '-' + e.day
        // console.log(e);
      },
      back() {
        uni.reLaunch({
          url: '/pages/index/index'
        })
      },
      async createFile() {
        if (this.gender === '') {
          uni.showToast({
            title: '请输入性别！',
            icon: 'error'
          })
          return
        } else if (this.birthday === '') {
          uni.showToast({
            title: '请选择出生日期！',
            icon: 'error'
          })
          return
        } else if (this.nowWeight === '') {
          uni.showToast({
            title: '请输入体重！',
            icon: 'error'
          })
          return
        } else if (this.height === '') {
          uni.showToast({
            title: '请输入身高！',
            icon: 'error'
          })
          return
        }
        this.nowWeight *= 2;
        const thanWeight = this.weight * 2 - this.nowWeight;
        this.thanWeight = Math.abs(thanWeight).toFixed(1);
        this.showIcon = thanWeight > 0;
        this.BMI = (this.nowWeight / 2 / this.height / this.height * 10000).toFixed(1);
        if (this.BMI <= 18.4) {
          this.nowHealth = '偏瘦';
          this.healthStyle = {
            backgroundColor: '#c3bdbd',
            color: '#E4FFFF'
          };
        } else if (this.BMI <= 23.9) {
          this.nowHealth = '正常';
          this.healthStyle = {
            backgroundColor: '#66CC00',
            color: '#E2FFFF'
          };
        } else if (this.BMI <= 27.9) {
          this.nowHealth = '超重';
          this.healthStyle = {
            backgroundColor: '#fffa4f',
            color: '#ea0d58'
          };
        } else {
          this.nowHealth = '肥胖';
          this.healthStyle = {
            backgroundColor: '#ff1b07',
            color: '#E2FFFF'
          };
        }
        uni.showLoading({
          title: '生成中',
          mask: true
        })
        let vuex_user = this.vuex_user
        vuex_user.weight = this.nowWeight / 2
        vuex_user.height = this.height
        if (!this.vuex_user.birthday) {
          vuex_user.birthday = this.birthday
          await uniCloud.callFunction({
            name: 'star-community-user',
            data: {
              flag: 2,
              data: {
                id: vuex_user.id,
                updateData: {
                  birthday: this.birthday
                }
              }
            }
          })
        }
        await uniCloud.callFunction({
          name: 'star-community-user',
          data: {
            flag: 2,
            data: {
              id: vuex_user.id,
              updateData: {
                weight: this.nowWeight / 2,
                height: this.height,
              }
            }
          }
        })
        this.$u.vuex('vuex_user', vuex_user)
        uni.hideLoading()
        // console.log(this.BMI);
        this.showMove = false
        this.showCreateFile = false
      }
    }
  }
</script>

<style lang="scss">
  .content {
    height: 100%;
    padding-bottom: 100rpx;
  }

  .info_box {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 150rpx;
  }

  .info_title {
    font-size: 36rpx;
  }

  .info_describe {
    margin-top: 66rpx;
    width: 84%;
    /* text-align: justify; */
    text-align: center;
    font-size: 32rpx;

  }

  .sele1 {
    margin-top: 70rpx;
    width: 45%;

  }

  .inpt {
    width: 250rpx;
    height: 90rpx;
    border: 1rpx solid #efefee;
    margin: 56rpx;
    position: relative;
    display: flex;
    align-items: center;
  }

  .inpt_label {
    position: absolute;
    left: 22rpx;
    top: -16rpx;
    font-size: 24rpx;
  }

  .buton {
    background-color: #02d998;
    border-radius: 20px;
    color: white;
    height: 76rpx;
    font-size: 38rpx;
    line-height: 76rpx;
    text-align: center;
    width: 80%;
    margin: 5vh 0 0 10vw;
    position: fixed;
    bottom: 50rpx;
  }

  .healCard {
    margin-top: 130rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    animation: into1 500ms ease-out;
  }

  .healCard_item {
    height: 760rpx;
    width: 640rpx;
    display: flex;
    justify-content: center;
    border: 1rpx solid black;
    position: relative;
    border-radius: 30rpx;
    box-shadow: 1rpx 1rpx 0 #d3d3d2;
  }

  .user_info {
    width: 100%;
    margin-top: 80rpx;
    padding: 30rpx;
  }

  .avatar {
    position: absolute;
    top: -86rpx;
    border-radius: 100%;
    width: 170rpx;
    height: 170rpx;

  }

  .name,
  .gender,
  .height,
  .weight,
  .age {
    display: flex;
    align-items: center;
    height: 100rpx;

    img {
      width: 40rpx;
      height: 40rpx;
      margin-right: 14rpx;
    }
  }

  .file {
    margin: 30rpx 0;
    padding: 25rpx;
    width: 640rpx;
    height: 360rpx;
    border-radius: 40rpx;
    background-color: #32CACF;
    border: 1rpx solid #00BEC6;

    .file-data {
      margin-bottom: 50rpx;
      display: flex;
      justify-content: start;
      align-items: center;

      .file-weight {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        .weight-g {
          color: #FEFEFE;
          font-size: 30rpx;
          position: absolute;
          top: 14rpx;
          right: -34rpx;
        }
      }

      .file-than {
        margin-left: 100rpx;
        position: relative;
        margin-top: 10rpx;

        .file-than-top {
          color: #FEFFFD;
          font-weight: 900;
          font-size: 80rpx;
        }

        .file-than-bottom {
          width: 130rpx;
          color: #cbf7f6;
          font-size: 30rpx;
          margin-left: 10rpx;
          position: absolute;
          bottom: -30rpx;
        }
      }
    }

    .file-res {
      width: 97%;
      height: 120rpx;
      background-color: #48dbe0;
      border-radius: 20rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      .file-BMI {
        color: #E2FFFF;
        margin: 0 80rpx;
        font-weight: 300;
        font-size: 30rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .BMI-title {
          padding-bottom: 10rpx;
        }

        .BMI-data {
          width: 80rpx;
          height: 50rpx;
          color: #DDFDFF;
          border-radius: 10rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }


  @keyframes into1 {
    from {
      transform: translateX(-300rpx);
      opacity: 0;
    }

    to {
      transform: translateX(0rpx);
      opacity: 1;
    }
  }
</style>